<template>
  <div class="layout_addprogram">
    <!-- <div class="top">
      <ul class="ul">
        <li
          class="li"
          v-for="(item,index) in list"
          :key="index"
          :class="currentIndex == index?'currentStyle':''"
          @click="tabEvent(index)"
        >{{item.val}}</li>
      </ul>
      <span class="addbtn" @click="addProjectNum">+</span>
    </div>-->
    <form action>
      <div class="row">
        <label for>医 院：</label>
        <input type="text" v-model="hospital" disabled />
      </div>
      <div class="row">
        <Icon type="ios-arrow-right" class="select-icon"></Icon>
        <label for>项 目 分 类：</label>
        <cube-select
          v-model="project_type"
          :options="project_type_arr"
          placeholder="请选择项目类别"
          @change="change_project_type"
        ></cube-select>
      </div>
      <div class="row">
        <label for>项 目 名 称：</label>
        <input
          type="text"
          v-model="project_name"
          placeholder="请选择项目名称"
          @change="changename(project_name)"
        />
      </div>
      <div class="row">
        <!-- <Icon type="ios-arrow-right" class="select-icon"></Icon> -->
        <label for>手 术 医 生：</label>
        <input
          type="text"
          v-model="doc_name"
          placeholder="请选择手术医生"
          @change="changedoctor(doc_name)"
        />
      </div>
      <cube-button @click="showDatePicker">
        手 术 时 间 ：
        <span v-text="billDate" :class="dateStyle?'':'datefalse'"></span>
      </cube-button>
      <div class="row">
        <label>消费总金额:</label>
        <input
          type="number"
          v-model="total_money"
          placeholder="请输入消费金额"
          @change="changemoney(total_money)"
        />
      </div>
      <div class="gray"></div>
      <div class="uploadMoudle">
        <p>上传消费凭证（最多上传3张）：</p>
        <cube-upload
          :action="action"
          :max="3"
          @file-click="upevent()"
          @files-added="filesAddedOrder"
          @file-success="fileSuccessOrder"
          @file-removed="fileRemovedOrder"
          v-if="mark"
        />
      </div>
      <div class="gray"></div>
      <!-- <button @click="createdBill()" :disabled="isdisabledBtn">提交</button> -->
    </form>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/apiPt'
let timer;
export default {
  data() {
    return {
      total_money: "", // 消费总金额
      hospital: "",
      programName: "",
      billDate: "请选择手术时间", //手术日期
      placeholder: "",
      action: {
        // 正式服
        target: "https://act.yuepinyuemei.com/api/upload/img",
        files: [],
        data: {
          dirPath: "order"
        }
      },
      str4: "",
      str5: "",
      order_sn: "",
      cardTime: "",
      isdisabledBtn: false,
      isopen: false,
      credit: "",
      pay_num: "",
      credit_all: "",
      project_type_arr: [],
      project_type: "",
      project_id: "",
      project_name: "",
      doc_name: "",
      is_other: false,
      dateStyle: false,
      currentIndex: "",
      list: [
        {
          val: "项目1",
          id: "1"
        }
      ],
      imgarr: [],
      projectNum: 1,
      form2: {},
      form3: {},
      hospitalId: "",
      obj: {},
      mark:true
    };
  },
  created() {
    document.title = "录入升单信息";
    this.axios.defaults.baseURL = api
    this.hospital = decodeURI(location.hash.split("=")[1]).split("&")[0];
    this.order_sn = location.hash.split("&")[2].split("=")[1];
    this.hospitalId = location.hash.split("&")[1].split("=")[1];
    // console.log(this.hospitalId);
    this.get_project_list();
    this.obj.operationTime = this.billDate;
    localStorage.setItem("obj2", JSON.stringify(this.obj));
  },
  methods: {
    cleardata(){
      this.project_type = "";
      this.project_name = "";
      this.doc_name = "";
      this.total_money = "";
      this.imgarr = [];
       this.mark = false;
      this.$nextTick(function() {
        this.mark = true;
      });
      this. billDate="请选择手术时间"
    },
    change_project() {
      this.project_name = "";
      this.option_program.forEach(item => {
        if (item.id == this.project_id) {
          if (item.name.includes("其他")) {
            this.is_other = true;
          } else {
            this.is_other = false;
            this.project_name = item.name;
          }
        }
      });
    },
    get_project_list() {
      //获取项目分类
      let loading = this.loading("加载中", 60000);
      loading.show();
      this.axios
        .post(
          "/api/com.mmk.groupservice.api.OpenGroupCategoryProvider/1.0.0/getOpenCategoryList.html",
          { queryType: 0 }
        )
        .then(msg => {
          loading.hide();
          if (msg.data.code == 0) {
            let arr = msg.data.data.list;
            arr.forEach(el => {
              el.value = el.id;
              el.text = el.categoryName;
            });
            this.project_type_arr = arr;
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
        })
        .catch(error => {
          // console.log(error);
          Toast({
            message: "请求错误，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    change_project_type(e) {
      // console.log(e);
      this.obj.categoryId = e;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
      // console.log(localStorage.obj1);
    },
    changename(e) {
      this.obj.projectName = e;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
    },
    changedoctor(e) {
      this.obj.doctorName = e;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
    },
    changemoney(e) {
      this.obj.amount = e;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
    },
    showDatePicker() {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: "日期",
          min: new Date(
            new Date().getFullYear(),
            new Date().getMonth() - 2,
            new Date().getDate()
          ),
          max: new Date(new Date().getFullYear(), 11, 31),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        });
      }
      this.datePicker.show();
    },
    selectHandle(date, selectedVal, selectedText) {
      if (selectedText[1] - 0 < 10) {
        selectedText[1] = "0" + (selectedText[1] - 0);
      }
      this.billDate = selectedText.join("-");
      this.dateStyle = true;
      this.obj.operationTime = this.billDate
      localStorage.setItem("obj2", JSON.stringify(this.obj));
    },
    isFirstSelect(text) {},
    filesAddedOrder(files) {     
      //消费凭证
      let hasIgnore = false;
      const maxSize = 20 * 1024 * 1024; // 20M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "图片上传失败，不能大于20M"
        }).show();
    },
    fileSuccessOrder(file) {
      this.imgarr.push(file.response.data.url);
      // console.log(this.imgarr)
      this.obj.verifyImg = this.imgarr;
      this.obj.orderId = this.order_sn - 0;
      this.obj.hospitalId = this.hospitalId - 0;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
    },
    //图片删除的回调
    fileRemovedOrder(file) {
      let index = this.imgarr.indexOf(
        file.response.data.url
      );
      this.imgarr.splice(index, 1);
      this.obj.verifyImg = this.imgarr;
      localStorage.setItem("obj2", JSON.stringify(this.obj));
      // console.log(this.imgarr+'删除后')
    },
    cancelTime() {
      this.cardTime = "";
    }
  },
  destroyed() {
    // console.log(1);
    this.project_type = "";
    this.project_name = "";
    this.doc_name = "";
    this.total_money = "";
    this.imgarr = [];
  }
};
</script>





<style scoped lang="less">
.layout_addprogram {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 17px;
  color: #666;
  text-align: center;
  margin: 0 auto;
  /* background:rgba(204,204,204,.2018); */
}

.isFinis {
  height: 48px;
  width: 100%;
  line-height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding-left: 15px;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.uploadMoudle {
  margin-top: 10px;
  background-color: #fff;
  padding: 13px 15px;
}
.uploadMoudle p {
  font-size: 16px;
  text-align: left;
  margin-bottom: 13px;
}

.isFirstSelect {
  height: 48px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  display: flex;
  background-color: #fff;
  padding-left: 15px;
}
.isFirstSelect label {
  height: 48px;
  line-height: 48px;
}

.note {
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding: 0 15px;
  font-size: 17px;
  color: #666;
  margin-top: 10px;
}

.row {
  min-height: 48px;
  line-height: 48px;
  width: 100%;
  background-color: #fff;
  text-align: left;
  padding-left: 15px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  position: relative;
  display: flex;
}

.row input {
  height: 46px;
  margin-bottom: 2px;
  background-color: #fff;
  font-size: 17px;
  padding-left: 10px;
  color: #666;
}

.gray {
  width: 100%;
  height: 10px;
  background: rgba(204, 204, 204, 0.2018);
}
.cube-btn {
  height: 48px !important;
  min-width: 70% !important;
  background: #fff !important;
  color: #666 !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
  padding: 17px 15px !important;
  float: left;
}
.cube-radio {
  display: inline-block !important;
}
.cube-radio-group {
  display: flex !important;
}
.cube-radio_selected .cube-radio-ui {
  background-color: #d8d8d8 !important;
}
.mint-field:nth-last-of-type(1) {
  border-bottom: none !important;
}

.cube-textarea::placeholder {
  color: #fff !important;
}
.cube-select::after {
  border: 0 !important;
}
.cube-select {
  width: 71% !important;
  line-height: 1.9 !important;
}
.cube-picker-confirm {
  color: #999;
}
</style>

<style lang="less">
.layout_addprogram {
  .cube-select-icon {
    display: none !important;
  }
  .select-icon {
    display: block;
    font-size: 20px;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99;
  }
  .time-btn {
    width: 50%;
  }
  .cube-textarea-wrapper,
  .cube-textarea {
    min-height: 120px !important;
    border-color: rgba(204, 204, 204, 1);
  }
  .cost {
    display: inline-block;
    .tip {
      color: #ccc;
      margin-top: -25px;
    }
  }
  .credit {
    .cube-switch {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    .cube-switch .cube-switch-input:checked + .cube-switch-ui {
      background-color: #09bb07;
      border-color: #09bb07;
    }
  }
  .check_num {
    .get-msg {
      height: 32px;
      line-height: 32px;
      padding: 0 15px;
      text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(204, 204, 204, 1);
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  ::placeholder,
  .cube-select-placeholder {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(204, 204, 204, 1);
  }
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  border-bottom: 1px solid #ccc;
  position: relative;
}
.ul {
  width: 89%;
  height: 50px;
  line-height: 50px;
  color: #919191;
  display: flex;
  padding: 0 15px;
  overflow-x: scroll;
  .li {
    width: auto;
    margin: 0 20px;
    white-space: nowrap;
  }
}
.datefalse {
  color: #ccc;
}
.currentStyle {
  color: #ff83a6;
  border-bottom: 2px solid #ff83a6;
}
.addbtn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(151, 151, 151, 1);
  border-radius: 50%;
  color: #888;
  font-size: 30px;
  line-height: 26px;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 24%;
  right: 15px;
}
</style>

